<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>处方管理</title>
<script src="js/jquery-1.6.2.min.js"></script>
<script src="js/jquery-ui-1.8.16.custom.min.js"></script>
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.16.custom.css"/>
<script type="text/javascript">
	$(function(){
		
		$("#methodType").toggle(function(){
			$("#methodTypeDetail").css("display","block");
			$("#methodTypeDetail").append("<li>感冒、发热类</li>");
			$("#methodTypeDetail").append("<li>乙肝类</li>");
			$("#methodTypeDetail").append("<li>甲状腺肿大类</li>");
		},
		function(){
			$("#methodTypeDetail").html("");
		});		
		$("#addMethod").live("click",function(){;
			var index=$("#methodMedicalDetailDiv tr").size();
			index++;
			var $table=$("#methodMedicalDetailDiv");
			$table.append("<tr align='center' id='medical"+index+"'></tr>");
			$("#methodMedicalDetailDiv tr[id=medical"+index+"]").append("<td><input type='text' value='头孢克洛胶囊' id='medicalName'"+index+"' disabled='disabled' class='inputDisabled'></td>");
			$("#methodMedicalDetailDiv tr[id=medical"+index+"]").append("<td><input type='text' id='medicalNum"+index+"' style='width: 30px'></td>");
			$("#methodMedicalDetailDiv tr[id=medical"+index+"]").append("<td><input type='text' value='盒' style='width: 30px' id='medicalUnits"+index+"' disabled='disabled' class='inputDisabled'></td>");
			$("#methodMedicalDetailDiv tr[id=medical"+index+"]").append("<td><textarea rows='2' cols='3' style='width: 200px' id='medicalMethod"+index+"'></textarea></td>");
			$("#methodMedicalDetailDiv tr[id=medical"+index+"]").append("<td><input id='button1' type='button' value='保存 ' class='button'></td>");
			
		});
	});
</script>
<style>
	#methodTypeDiv{
		padding-left: 0px;
		width:300px;
		float: left
	}

	#addMedical{
		padding-left: 0px;
		width:500px;
		float: left
	}
	
	#methodMedicalDetailDiv{
		padding-left: 0px;
		width:780px;
	}
	
	.medical{
		padding-left: 0px;
		width:780px;
		height: 30px; 
	}
	
	span{
		width:180px;
		float:left;		
	}
	
	.inputDisabled{
		border: 0 ;
		color: black;
		background-color: white;
	}
	
	.button{
		width: 50px;
	}
	
</style>
</head>
<body>
<div style="padding-left:0px">
	<table style="width:950px;height:768px;" cellspacing="0" cellpadding="0" border="1">
		<tr>
			<td style="width:120px;" valign="top" align="left">
				<div id="left" style="float:left;padding-left: 0px;" align="left">
					<h4 id="methodType" align="left" style="padding-left: 0px">处方类别</h4>	
					<div align="left">
						<ul id="methodTypeDetail" style="padding-left:0px"></ul>
					</div>
				</div>
			</td>
			<td valign="top">
				<table cellspacing="0" height="768px" width="830px" border="1"> 
					<tr>
						<td height="50px">
						<div id="methodTypeDiv">
							选择处方类别:
							<select>
								<option>感冒、发烧类</option>
								<option>甲状腺肿大类</option>
								<option>乙肝类</option>
							</select>
						</div>
						<div id="addMedicalDiv">
							药品信息:
							<input type="text" width="50px">
							<input type="text" id="findMedicalName" disabled="disabled" class="inputDisabled">
							<input type="button" value="添加药品" id="addMethod">
						</div>
						</td>
					</tr>
					<tr>
						<td valign="top" align="right">
							<table id="methodMedicalDetailDiv">
								<tr align="center" height="50px">
									<td width="500px">
										<span>药品名称</span>
									</td>
									<td width="30px">		
										<span>数量</span>	
									</td>
									<td width="30px">
										<span>单位</span>
									</td>
									<td colspan="2" width="250px">
										<span>使用方法</span>
									</td>
								</tr>
								<tr align="center" id="medical1">
									<td>
										<input type="text" value="头孢克洛胶囊" id="medicalName1" disabled="disabled" class="inputDisabled">
									</td>
									<td>		
										<input type="text" id="medicalNum1" style="width: 30px">	
									</td>
									<td>
										<input type="text" value="盒" id="medicalUnits1" disabled="disabled" style="width: 30px" class="inputDisabled">
									</td>
									<td>
										<textarea rows="2" cols="3" style="width: 200px" id="medicalMethod1"></textarea>
									</td>
									<td>
										<input id="button1" type="button" value="保存 " class="button">
									</td>
								</tr>
								<tr align="center" height="30px" id="medical2">
									<td>
										<input type="text" value="板蓝根冲剂" id="medicalName2" disabled="disabled" class="inputDisabled">
									</td>
									<td>		
										<input type="text" id="medicalNum2" style="width: 30px">	
									</td>
									<td>
										<input type="text" value="袋" id="medicalUnits2" disabled="disabled" style="width: 30px" class="inputDisabled">
									</td>
									<td>
										<textarea rows="2" cols="3" style="width: 200px" id="medicalMethod2"></textarea>
									</td>
									<td>
										<input id="button2" type="button" value="保存 " class="button">
									</td>
								</tr>
								<tr height="30px" id="medical3" align="center">
									<td>
										<input type="text" value="白加黑" id="medicalName3" disabled="disabled" class="inputDisabled">
									</td>
									<td>		
										<input type="text" id="medicalNum3" style="width: 30px">	
									</td>
									<td>
										<input type="text" value="盒" id="medicalUnits3" disabled="disabled" style="width: 30px" class="inputDisabled">
									</td>
									<td>
										<textarea rows="2" cols="3" style="width: 200px" id="medicalMethod3"></textarea>
									</td>
									<td>
										<input id="button3" type="button" value="保存 " class="button">
									</td>
								</tr>					
							</table><br><br>
							<input type="button" value="生成处方">
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
</div>
</body>
</html>